<template>
  <div class="chart-box">
    <div id="myChart5" :style="{ width: '100%', height: '90%' }"></div>
    <div class="chart-title">
      <div class="chart-border"></div>
      <div>货船计划执行完成</div>
      <div class="chart-border-2"></div>
    </div>
  </div>

</template>

<script>
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'SemicircleRingChart',
  setup() {
    const state = reactive({
      option: {
        // grid: {
        //   top:'35%',
        //   left: '3%',
        //   right: '20%',
        //   bottom: '50%',
        //   containLabel: true
        // },
        title: [
          {
            text: '完成率',
            subtext:'70%',
            y: "28%",
            x: "center",
            textStyle: {
              fontSize: 14,
              fontFamily: 'PangMenZhengDao-Regular, PangMenZhengDao',
              color: "#ffffff",
            },
            subtextStyle: {
              fontSize: 27,
              color: "#43FFFD",
            },
          },
        ],
        series: [
          {
            type: "pie",
            color: ["transparent", 'transparent', 'transparent'],
            startAngle: 180,
            center: ["50%", "50%"],
            radius: ['75%', '90%'],
            hoverAnimation: false,
            labelLine: {
              show: false
            },
            data: [
              {
                name: "",
                value: 70,
                itemStyle: {
                  normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0,0,1,0,[
                      {
                        offset: 0,
                        color: "#00b6f0",
                      },
                      {
                        offset: 1,
                        color: "#008dff",
                      },
                    ],false),
                  },
                },
              },
              { //画剩余的刻度圆环
                name: "",
                value: 100 - 70,
                itemStyle: {
                  color: 'rgba(1, 171, 243, 0.20)'
                },
              },
              { //画剩余的刻度圆环
                name: "",
                value: 100,
              }
            ]
          }
        ]
    }})
    const initeCharts = () => {
      let myChart2 = echarts.init(document.getElementById('myChart5'))
      // 绘制图表
      myChart2.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.chart-title {
  display: flex;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #ffffff;
  line-height: 20px;
  letter-spacing: 0.01px;
  margin-top: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 32%;
  .chart-border {
    width: 32px;
    height: 1px;
    border: 2px solid;
    border-image: linear-gradient(90deg, rgba(200,200,200,0.00), #008eff 63%, #008eff 98%) 2 2;
    margin-right: 5px;
  }
  .chart-border-2 {
    width: 32px;
    height: 1px;
    border: 2px solid;
    border-image: linear-gradient(-90deg, rgba(200,200,200,0.00), #008eff 63%, #008eff 98%) 2 2;
    margin-left: 5px;
  }
}
</style>

